<template>
  <div class="maintenance_management">
    <div class="search-box">
      <Row type="flex">
        <Row type="flex"
             justify="start"
             class="search-item-left">
          <Col class="search-item">
          <span class="search-label">搜索输入:</span>
          <Input placeholder="标准名称/PN"
                 style="width:180px"
                 v-model='searchObj.name'></Input></Col>
          </Col>
          <Col class="search-item">
          <span class="search-label"
                style="line-height:35px;vertical-align: top;">门店名称：</span>
          <div style="display:inline-block">
            <vueTreeselectChoice :multiple="true"
                                 ref="vueTreeselectChoice"
                                 @input="handleShop"
                                 @on-api-finish="apiFinish"
                                 permissionCode="moms:assets:invoiceview"
                                 v-model="ShopValue"></vueTreeselectChoice>
          </div>
          </Col>
          <Col class="search-item">
          <span class="search-label">维修等级：</span>
          <Select v-model="searchObj.faultLevel"
                  @on-change="seleted"
                  clearable
                  placeholder="请选择">
            <Option value=0>全部</Option>
            <Option value=1>一级</Option>
            <Option value=2>二级</Option>
            <Option value=3>三级</Option>
            <Option value=4>四级</Option>
          </Select>
          </Col>
          <Col class="search-item">
          <Button class="search-btn"
                  type='primary'
                  @click="seleted">查询</Button>
          </Col>
          <Col class="search-item">
          <Button class="search-btn"
                  @click="reset">重置</Button>
          </Col>
        </Row>
        <Row type="flex"
             justify="end"
             class="search-item-right">
          <Col class="search-item">
          <Button v-if="exampleShow"
                  @click="exampleOpen">收起筛选
            <Icon type="ios-arrow-up" />
          </Button>
          <Button v-else
                  @click="exampleOpen">更多筛选
            <Icon type="ios-arrow-down" />
          </Button>
          </Col>
        </Row>
      </Row>
      <div class="search-example"
           v-show="!exampleShow">
        <Row type="flex">
          <Row type="flex"
               justify="start"
               class="search-item-left">
          </Row>
          <Row type="flex"
               justify="end"
               class="search-item-right search-item-right01">
            <Col class="search-item">
            <Button class="search-btn"
                    @click="exportTable">导出</Button>
            </Col>
            <Col class="search-item">
            <Button class="search-btn"
                    type='primary'
                    @click="add">添加</Button>
            </Col>
          </Row>
        </Row>
      </div>
      <div class="search-example"
           v-if="exampleShow">
        <Row type="flex">
          <Row type="flex"
               justify="start"
               class="search-item-left">
            <Col class="search-item">
            <span class="search-label">时间：</span>
            <!-- <DatePicker type="daterange"
                        style="width:180px;"
                        @on-change="seleted"
                        v-model="finishTime"
                        class="search-picker"></DatePicker> -->
            <datePickerYmd @on-change="seleted"
                           :selectDateType.sync='selectDateType'
                           :dataType='dataType'
                           :dateOption="dateOption"
                           v-model="finishTime"
                           style="display:inline-block"></datePickerYmd>
            </Col>
            <Col class="search-item">
            <span class="search-label">维修流程：</span>
            <Select v-model="searchObj.repairStatus"
                    @on-change="seleted"
                    placeholder="请选择">
              <Option value=0>未修讫</Option>
              <Option value=1>保修中</Option>
              <Option value=2>已寄件</Option>
              <Option value=3>已寄回</Option>
              <Option value=4>已修讫</Option>
              <Option value=5>返修中</Option>
              <Option value=6>无法修理</Option>
              <Option value=7>已结束</Option>
            </Select>
            </Col>
          </Row>
          <Row type="flex"
               justify="end"
               class="search-item-right">
            <Col class="search-item">
            <Button class="search-btn"
                    @click="exportTable">导出</Button>
            </Col>
            <Col class="search-item">
            <Button class="search-btn"
                    type='primary'
                    @click="add">添加</Button>
            </Col>
          </Row>
        </Row>
      </div>
    </div>
    <Table stripe
           class="table-list"
           :columns="columns"
           :data="tableData"
           :loading="loading"
           :height="tableHeight">
      <template slot-scope="{ row,index }"
                slot="serial">
        <span>{{index+1}}</span>
      </template>
      <template slot-scope="{ row }"
                slot="hasConfirm">
        <span>{{['否','是'][row.hasConfirm]}}</span>
      </template>
      <template slot-scope="{ row }"
                slot="faultLevel">
        <span>{{['','一级','二级','三级','四级'][row.faultLevel]}}</span>
      </template>
      <template slot-scope="{ row }"
                slot="repairStatus">
        <span>{{['未修讫','保修中','已寄件','已寄回','已修讫','返修中','无法修理','已结束'][row.repairStatus]}}</span>
      </template>
      <template slot-scope="{ row }"
                slot="hasRepair">
        <span>{{['否','是'][row.hasRepair]}}</span>
      </template>
      <template slot-scope="{ row }"
                slot="invoiceStatus">
        <span>{{['未收货','已收货','已终止'][row.invoiceStatus]}}</span>
      </template>
      <template slot-scope="{ row }"
                slot="machineInstanceSlotNo">
        <span>{{['店内','店外'][row.machineInstanceSlotNo]}}</span>
      </template>
      <template slot-scope="{ row }"
                slot="action">
        <i class="iconsys icondetail"
           title="查看"
           v-if="hasPermission('moms:assets:invoicedetail')"
           @click="lookDetail(row.machineRepairId)"></i>
        <i class="iconsys iconedit"
           title="编辑"
           @click='skipEdit(row, index)'></i>
        <Poptip confirm
                title="你确定要中止吗？"
                @on-ok="suspend(row)"
                v-if="hasPermission('moms:assets:invoiceclose')"
                @on-cancel="cancel">
          <i class="iconsys icontingyong"
             title="中止"></i>
        </Poptip>
      </template>
    </Table>
    <Row type='flex'
         justify="end"
         style='padding: 20px'>
      <Col>
      <Page :total="pageObj.total"
            :page-size='pageObj.pageSize'
            :current='pageObj.pageIndex'
            :page-size-opts='[20,50,100,200]'
            show-total
            show-sizer
            @on-change='changePageIndex'
            @on-page-size-change='changePageSize' />
      </Col>
    </Row>
  </div>
</template>
<script>
import vueTreeselectChoice from '@/components/vue-treeselect-choice'
import datePickerYmd from '@/components/date-picker-ymd/date-picker-ymd.vue'
import { repairList, repairExport, forceFinish } from '@/api/asset/repair/asset-manage.js'
import { mapState } from 'vuex'
import { blobToXls } from '@/libs/blobToXls'
import dayjs from 'dayjs'
export default {
  name: 'maintenance_management',
  components: { vueTreeselectChoice, datePickerYmd },
  data () {
    return {
      ShopValue: [],
      exampleShow: false,
      list: ['店内', '店外'],
      faultList: [
        { value: '0', name: '全部' }
      ],
      pageObj: {
        total: 0,
        pageIndex: 1,
        pageSize: 20
      },
      columns: [
        {
          title: '序号',
          slot: 'serial'
        },
        {
          title: '维修单号',
          key: 'repairNo'
        },
        {
          title: '门店名称',
          key: 'shopName'
        },
        {
          title: '机台名称',
          key: 'machineInstanceName'
        },
        {
          title: '游戏位',
          slot: 'machineInstanceSlotNo'
        },
        {
          title: '维修等级',
          slot: 'faultLevel'
        },
        {
          title: '维修流程',
          slot: 'repairStatus'
        },
        {
          title: '维修费用',
          key: 'epairFee'
        },
        {
          title: '店长确定',
          slot: 'hasConfirm'
        },
        {
          title: '已修讫',
          slot: 'hasRepair'
        },
        {
          title: '操作',
          slot: 'action',
          width: 200
        }
      ],
      tableData: [],
      loading: false,
      dataType: [{ key: 'date', value: '日' }, { key: 'month', value: '月' }, { key: 'daterange', value: '自定义' }],
      dateOption: {
        disabledDate: date => {
          if (process.env.NODE_BUILD === 'prod') return dayjs(date).isAfter(dayjs(new Date()).subtract(1, 'day'))
          return dayjs(date).isAfter(dayjs(new Date()))
        }
      },
      finishTime: [dayjs().subtract(1, 'day').format('YYYY-MM-DD 00:00:00'), dayjs(new Date()).format('YYYY-MM-DD 00:00:00')],
      selectDateType: 'date',
      searchObj: {
        faultLevel: '',
        repairStatus: '',
        name: ''
      }
    }
  },
  computed: {
    ...mapState({
      merchantId: state => state.user.merchantId,
      userId: state => state.user.userId,
      userName: state => state.user.userName
    }),
    tableHeight () {
      let height = this.tableData.length > 10 ? 580 : 0
      return height
    },
    finishTimeStart () {
      return this.finishTime[0]
    },
    finishTimeEnd () {
      if (this.selectDateType === 'daterange') return dayjs(this.finishTime[1]).add(1, 'day').format('YYYY-MM-DD 00:00:00')
      return this.finishTime[1]
    }
  },
  mounted () {
    // this.getQuery()
    this.getList()
  },
  methods: {
    // 筛选按钮
    exampleOpen () {
      this.exampleShow = !this.exampleShow
    },
    handleShop () {

    },
    add () {
      this.$router.push({ name: 'maintenance_create' })
    },
    // 编辑
    skipEdit () {

    },
    getQuery () {
      // dictionaryQuery({
      //   category: 'faultLevel'
      // }).then(res => {
      //   let result = res.data
      //   if (result.status === 200) {
      //     let option = result.data
      //     console.log(option)
      //     option.map((ele, index) => {
      //       this.faultList.push({
      //         name: `${index + 0}级`,
      //         value: ele.dictKey
      //       })
      //     })
      //     this.faultList.push({

      //     })
      //   } else {
      //     this.$Message.error(`${result.error}`)
      //   }
      // })
    },
    exportTable () {
      repairExport({
        shopIdList: this.ShopValue,
        createTimeStart: this.finishTimeStart,
        createTimeEnd: this.finishTimeEnd,
        // createTimeStart: '2020-01-01 00:00:00',
        // createTimeEnd: '2020-01-31 00:00:00',
        name: this.searchObj.name,
        fileName: `维修管理-${dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')}.xls`,
        repairStatus: this.searchObj.repairStatus,
        faultLevel: this.searchObj.faultLevel ? this.searchObj.faultLevel : '',
        offset: 0,
        limit: 1000
      }).then(res => {
        if (res.status === 200) {
          blobToXls(res.data, `维修管理表-${dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')}`)
        } else {
          this.$Message.error(`${res.error}`)
        }
      })
    },
    cancel () {

    },
    suspend (row) {
      console.log(row)
      forceFinish({
        machineRepairId: row.machineRepairId
      }).then(res => {
        if (res.data.status === 200) {
          this.$Message.success('成功中止')
          this.getList()
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    lookDetail (id) {
      this.$router.push({ name: 'maintenance_detail', query: { id: id } })
    },
    getList () {
      this.loading = true
      repairList({
        shopIdList: this.ShopValue,
        // createTimeStart: this.finishTimeStart,
        // createTimeEnd: this.finishTimeEnd,
        // createTimeStart: '2020-01-01 00:00:00',
        // createTimeEnd: '2020-01-31 00:00:00',
        name: this.searchObj.name,
        repairStatus: this.searchObj.repairStatus,
        faultLevel: this.searchObj.faultLevel ? this.searchObj.faultLevel : '',
        offset: (this.pageObj.pageIndex - 1) * this.pageObj.pageSize,
        limit: this.pageObj.pageSize
      }).then(res => {
        this.loading = false
        if (res.data.status === 200) {
          this.pageObj.total = res.data.totalCount
          this.tableData = res.data.data || []
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    reset () {

    },
    changePageIndex () {

    },
    changePageSize () {

    },
    seleted () {
      this.pageObj.pageIndex = 1
      this.getList()
    },
    apiFinish () {

    }
  }
}
</script>
<style lang="less" scoped>
.maintenance_management {
  .search-example {
    width: 100%;
    .search-item-left {
      width: ~'calc(100% - 250px)';
    }
    .search-item-right {
      width: 250px;
    }
  }
  .search-items {
    margin-left: 30px;
    padding-top: 24px;
  }
}
</style>
